import QtQuick 2.1
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.2

Item {
    id: rootBox
    width: 50
    height: 50
    property int radius: 0
    property int currentIndex: 0

    signal close

    function hideMiniWindow(){
        pinButton.active = false
        mainView.hide()
        mainView.recordCurrentVisible("false")
    }

    property int textMargin: 8

    function isPinned(){
        return pinButton.active
    }

    Rectangle {
        id: frame
        //color: "transparent"
        //anchors.centerIn: parent
        width: parent.width
        anchors.fill:parent
        radius: rootBox.radius
        clip: true

        property string showConetnt: ""

        gradient:Gradient {
            GradientStop { position: 0.9; color: "#15A0F5" }
            GradientStop { position: 1; color: "#FFFFFF" }
        }

        Item {
            id: title
            anchors.top: frame.top
            anchors.topMargin: 5
            //anchors.verticalCenter: parent.verticalCenter
            anchors.left: frame.left
            anchors.right: frame.right
            height: 15


            /*ImageButton {
                id: maxButton

                anchors.right: closeButton.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.rightMargin: 8
                normal_image: "images/maxbutton.png"
                hover_image: "images/maxbutton.png"
                press_image: "images/maxbutton.png"
                //onClicked: popupMenu.showAtCursor()
            }*/

            /*ImageCheckButton {
                id: maxButton
                anchors.right: closeButton.left
                anchors.rightMargin: 8
                anchors.verticalCenter: parent.verticalCenter

                inactivatedNormalImage: "images/pin_off_normal.png"
                inactivatedHoverImage: "images/pin_off_hover.png"
                inactivatedPressImage: "images/pin_off_press.png"

                activatedNormalImage: "images/pin_on_normal.png"
                activatedHoverImage: "images/pin_on_hover.png"
                activatedPressImage: "images/pin_on_press.png"
            }*/

            ImageButton {
                id: closeButton
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 8
                normal_image: "images/close_normal.png"
                hover_image: "images/close_hover.png"
                press_image: "images/close_press.png"
                onClicked: rootBox.close()
            }
        }
        GridView {
            anchors.top: title.bottom
            width: 100 *2
            height: 60
            anchors.horizontalCenter: parent.horizontalCenter
            keyNavigationWraps: true
            highlightMoveDuration: 0
            focus: true
            snapMode: ListView.SnapToItem


            model: ListModel {
                id: listmodel
                ListElement {name: "HeartRate"; image:"icons/dark/appbar.graph.line.png"}
                ListElement {name: "HealthyInfo"; image:"icons/dark/appbar.cards.heart.png"}
            }

            delegate: Rectangle {
                //color: "#FFFFFF"
                width: 100
                height: img.height+ 15
                //clip: true
                color: "transparent"
                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        rootBox.currentIndex = index;
                    }
                }

                Image {
                    id: img
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                    source: image
                }
                Text {
                    id: tex
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.verticalCenterOffset: 30
                    anchors.horizontalCenter: parent.horizontalCenter
                    verticalAlignment: Text.AlignTop
                    font.pixelSize: 15
                    color: "#FFFFFF"
                    text: qsTr(name)
                }
            }
        }
    }

}
